<template>
  <div class='container'>
    <el-dialog
    title="题目预览"
    :visible="showDialog"
    @close="closeDialog"
    >
      <el-descriptions :column="4">
      <el-descriptions-item  label="【题型】">{{formatter}}</el-descriptions-item>
      <el-descriptions-item label="【编号】">{{data.id}}</el-descriptions-item>
      <el-descriptions-item  label="【难度】">{{formatterFn}}</el-descriptions-item>
      <el-descriptions-item label="【标签】">{{data.tags}}</el-descriptions-item>
      <el-descriptions-item label="【学科】">{{data.subjectName}}</el-descriptions-item>
      <el-descriptions-item label="【目录】">{{data.directoryName}}</el-descriptions-item>
      <el-descriptions-item label="【方向】">{{data.direction}}</el-descriptions-item>
      </el-descriptions>
      <hr>
      【题干】：<div v-html="data.question" style="color:blue"></div>
        <div v-if="data.questionType !=='3'">
        <div style="padding-bottom:5px">{{data.questionType|tx}} 选项：（以下选中的选项为正确答案）</div>
        <div v-for="item in data.options" :key="item.code" style="padding:8px 0">
          <el-radio v-if="data.questionType ==='1'" :value="item.isRight" :label="1">{{item.title}}</el-radio>
        <el-checkbox v-if="data.questionType ==='2'" :value="item.isRight?true:false" >{{item.title}}</el-checkbox>
        </div>
      </div>
      <hr>
      <div >
        <span>【参考答案】:</span>
        <el-button type="danger" @click="videoisShow">视频答案解析</el-button>
      </div>
      <div v-show="isShow" class="video">
        <video ref="video" :src="data.videoURL" controls></video>
      </div>
      <hr>
      <div class="flex">
        <span>【答案解析】:</span>
        <span v-html="data.answer" class="span"></span>
      </div>
      <hr>
      <el-descriptions column:1 >
        <el-descriptions-item label="【项目备注】">{{data.remarks}}</el-descriptions-item>
      </el-descriptions>
      <div class="right">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
export default {
  filters: {
    tx (value) {
      if (value) return questionType.find(item => item.value === +value).label + '题'
    }
  },
  data () {
    return {
      isShow: false,
      flag: '',
      // answer: '',
      difficulty: difficulty,
      questionType: questionType
    }
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      required: true
    }
  },
  computed: {
    formatterFn () {
      // console.log(difficulty)
      return difficulty.find(item => +item.value === +this.data.difficulty)?.label
    },
    formatter () {
      return questionType.find(item => +item.value === +this.data.questionType)?.label
    }
  },
  methods: {
    videoisShow () {
      this.isShow = !this.isShow
      // this.$refs.video.play()
    },
    // 关闭弹窗
    closeDialog () {
      this.$emit('close', false)
      this.isShow = false
      // this.$refs.video.pause()
    }
  }
}
</script>

<style scoped lang='less'>
.flex{
  display: flex;
  height: 50px;
  align-items: center;
 .span{
   margin: 0 !important;
  ::v-deep{
    p{
    margin: 0 !important;
  }
  }
 }
}
.video{
  width: 400px;
  height: 300px;
  video{
    width: 100%;
    height: 100%;
  }
}
.right{
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
</style>
